<template>
    <!-- 点击文章类别时显示的文章详情页面 -->
    <div id="article-list">
        <el-row type="flex" align="middle"> <!-- 顶部内容 -->
            <el-col :lg="4">
                <el-image :src="require('@/assets/logo.png')" class="logo" @click="showFirstIndex"/> <!-- logo标志 -->
            </el-col>
            <el-col :lg="12" :offset="3">
                <el-input placeholder="请输入需要搜索的内容" class="content-search">
                <el-button slot="append" class="icon-search">
                    <i class="el-icon-search" id="el-icon-search"/> <!-- 搜索框 -->
                </el-button>
                </el-input>
            </el-col>
            <el-col :lg="5" :offset="3">
                <div class="right-content">
                <span class="index-shop">
                    <i class="el-icon-shopping-cart-1" @click="showOrderCat"/> <!-- 购物车 -->
                </span>
                <span class="index-advice" @mouseleave="hideSelectList('adviseSelectListRef')">
                    <i class="el-icon-bell" @click="showView('/advise')" @mouseover="showSelectList('adviseSelectListRef')"/> <!-- 通知 -->
                    <div id="advise-select-list" ref="adviseSelectListRef"> <!-- 通知鼠标悬浮下拉菜单 -->
                    <div id="unuse-div"/>
                    <div id="advise-select" @click="showView('/commonAdvise')"><span>公告</span></div>
                    <div id="advise-select" @click="showView('/commentAdvise')"><span>评论</span></div>
                    <div id="advise-select" @click="showView('/followeeAdvise')"><span>关注</span></div>
                    <div id="advise-select" @click="showView('/personalAdvise')"><span>私信</span></div>
                    <div id="advise-select" @click="showView('/systemAdvise')"><span>系统通知</span></div>
                    <div id="advise-select" @click="showView('/adviseSettings')"><span>消息设置</span></div>
                    </div>
                </span>
                <span v-if="!isLogin" class="login-regist"> <!-- 未登录状态，显示登陆/注册 -->
                    <router-link to="/regist">注册</router-link>
                    <el-divider direction="vertical"/>
                    <router-link to="/login">登录</router-link>
                </span>
                <span id="user-avatar" v-else @mouseover="showSelectList('userSelectListRef')" @mouseleave="hideSelectList('userSelectListRef')"> <!-- 已登录状态，显示头像 -->
                    <span @click="showView('/user')"><el-avatar :size="42" src="http://online.sccnn.com/img2/5890/coff160524-03.png"/></span>
                    <div id="user-select-list" ref="userSelectListRef"> <!-- 头像鼠标悬浮下拉菜单 -->
                    <div id="unuse-div"/>
                    <div id="user-select" @click="showView('/myFollowee')"><svg-icon icon-class="heart"/>&ensp;我的关注</div>
                    <div id="user-select" @click="showView('/myCollection')"><svg-icon icon-class="collect"/>&ensp;我的收藏</div>
                    <div id="user-select" @click="showView('/myInfo')"><svg-icon icon-class="user"/>&ensp;个人中心</div>
                    <div id="user-select" @click="showView('/accountSettings')"><svg-icon icon-class="setting"/>&ensp;账号设置</div>
                    <el-divider/>
                    <div id="user-select" @click="showView('/myArticle')"><svg-icon icon-class="myArticle"/>&ensp;我的文章</div>
                    <div id="user-select" @click="showView('/putOutArticle')"><svg-icon icon-class="managerArticle"/>&ensp;发布文章</div>
                    <el-divider/>
                    <div id="user-select" @click="showView('/myWallet')"><svg-icon icon-class="wallet"/>&ensp;我的钱包</div>
                    <div id="user-select" @click="showView('/myOrder')"><svg-icon icon-class="order"/>&ensp;我的订单</div>
                    <el-divider/>
                    <div id="user-select"><svg-icon icon-class="help"/>&ensp;帮助&ensp;&ensp;&ensp;&ensp;</div>
                    <div id="user-select"><svg-icon icon-class="exit"/>&ensp;退出&ensp;&ensp;&ensp;&ensp;</div>
                    </div>
                </span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{category}}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row id="article-area"> <!-- 免费专区 -->
            <el-row>
                <el-row id="article-free-area-title">
                    <i class="el-icon-collection-tag"/>免费专区
                </el-row>
                <el-row id="article-free-area">
                    <el-col :lg="6"  v-for="(articleBrief,index) in farticleBriefs" :key="index">
                        <el-row>
                            <el-image :src="require('@/assets/activity1.png')" @click="watchContent(category, articleBrief, 'free')"/>
                        </el-row>
                        <el-row>
                            <span @click="watchContent(category, articleBrief, 'free')">{{category}}</span>
                        </el-row>
                        <el-row>
                            <el-avatar :size="14" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                            <span>{{articleBrief.author}}</span>
                            <span>
                                <span>&ensp;<i class="el-icon-view"/>浏览&ensp;{{articleBrief.glanceNum}}</span>
                                <span>&ensp;<i class="el-icon-chat-dot-round"/>评论&ensp;{{articleBrief.commentNum}}</span>
                            </span>
                        </el-row>
                        <el-row>
                            <span>{{articleBrief.issueTime}}</span>
                            <span :ref="'free_intertest_'+index" @mouseleave="hiddenIntertestWords(index, 'free')" @click="loseIntertest"><span id="free-lose-intertest-words">不感兴趣&ensp;</span><i class="el-icon-close" @mouseover="showLostIntertestWords(index, 'free')"/></span>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row id="article-free-area-footer">
                    <el-pagination
                        background
                        prev-text="上一页"
                        next-text="下一页"
                        layout="prev, pager, next"
                        @current-change="handlerFreeCurrentChange"
                        :current-page.sync="fcurrentPage"
                        :page-size.sync="fpageSize"
                        :total="sarticleBriefs.length">
                    </el-pagination>
                </el-row>
            </el-row>
            <el-row> <!-- 精品专区 -->
                <el-row id="article-charge-area-title">
                    <i class="el-icon-collection-tag"/>精品专区
                </el-row>
                <el-row id="article-charge-area">
                    <el-col :lg="6"  v-for="(articleBrief,index) in carticleBriefs" :key="index">
                        <el-row>
                            <el-image :src="require('@/assets/activity3.png')" @click="watchContent(category, articleBrief, 'charge')"/>
                        </el-row>
                        <el-row>
                            <span @click="watchContent(category, articleBrief, 'charge')">{{category}}<el-avatar :size="16" :src="require('@/assets/charge.png')"/></span>
                        </el-row>
                        <el-row>
                            <el-avatar :size="14" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                            <span>{{articleBrief.author}}</span>
                            <span>
                                <span>&ensp;<i class="el-icon-view"/>浏览&ensp;{{articleBrief.glanceNum}}</span>
                                <span>&ensp;<i class="el-icon-chat-dot-round"/>评论&ensp;{{articleBrief.commentNum}}</span>
                            </span>
                        </el-row>
                        <el-row>
                            <span>{{articleBrief.issueTime}}</span>
                            <span :ref="'charge_intertest_'+index" @mouseleave="hiddenIntertestWords(index, 'charge')" @click="loseIntertest"><span id="charge-lose-intertest-words">不感兴趣&ensp;</span><i class="el-icon-close" @mouseover="showLostIntertestWords(index,'charge')"/></span>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row id="article-charge-area-footer">
                    <el-pagination
                        background
                        prev-text="上一页"
                        next-text="下一页"
                        layout="prev, pager, next"
                        @current-change="handlerChargeCurrentChange"
                        :current-page.sync="ccurrentPage"
                        :page-size.sync="cpageSize"
                        :total="sarticleBriefs.length">
                    </el-pagination>
                </el-row>
            </el-row>
        </el-row>
        <el-row> <!-- 底部内容 -->
            <el-divider/>
            <el-row>
                <el-row>
                <el-col :span="4" :push="2">
                    <b>网站相关</b>
                </el-col>
                <el-col :span="4" :push="2">
                    <b>常用链接</b>
                </el-col>
                <el-col :span="4" :push="2">
                    <b>联系我们</b>
                </el-col>
                <el-col :span="4" :push="2">
                    <b>关注我们</b>
                </el-col>
                <el-col :span="4" :push="2">
                    <b>内容许可</b>
                </el-col>
                </el-row>
                <el-row class="footer-item-content1">
                <el-col :span="4" :push="2">
                    <div>关于我们</div>
                    <div>服务条款</div>
                    <div>帮助中心</div>
                    <div>编辑器语法</div>
                </el-col>
                <el-col :span="4" :push="2">
                    <div>百年智教育</div>
                    <div>百年智论坛</div>
                </el-col>
                <el-col :span="4" :push="2">
                    <div>联系我们</div>
                    <div>加入我们</div>
                    <div>建议反馈</div>
                </el-col>
                <el-col :span="4" :push="2">
                    <div>微博</div>
                    <div>twitter</div>
                </el-col>
                <el-col :span="4" :push="2">
                    除特别说明外，用户内容均采用知识共享署名-非商业性使用-禁止演绎4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可
                    <p>
                    本站由 百年智教育 提供更新服务
                    </p>
                </el-col>
                </el-row>
            </el-row>
            <el-row class="footer-item-content2">
                Copyright © 2020 百年智集团 当前版本 0.0.1
            </el-row>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'Article',
    data() {
        return {
            category: this.$route.query.category,
            articleActiveName: 'free',
            sarticleBriefs: [
                {
                    author: '张三',
                    issueTime: new Date().getFullYear()+'年'+(new Date().getMonth()+1)+'月'+new Date().getDate()+'日',
                    title: '',
                    commentNum: 144,
                    glanceNum: 666,
                    collectNum: 122
                },
                {
                    author: '李四',
                    issueTime: new Date().getFullYear()+'年'+(new Date().getMonth()+1)+'月'+new Date().getDate()+'日',
                    title: '',
                    commentNum: 144,
                    glanceNum: 666,
                    collectNum: 123
                },
                {
                    author: '王五',
                    issueTime: new Date().getFullYear()+'年'+(new Date().getMonth()+1)+'月'+new Date().getDate()+'日',
                    title: '',
                    commentNum: 2374,
                    glanceNum: 9999,
                    collectNum: 1253
                },
                {
                    author: '赵六',
                    issueTime: new Date().getFullYear()+'年'+(new Date().getMonth()+1)+'月'+new Date().getDate()+'日',
                    title: '',
                    commentNum: 888,
                    glanceNum: 1200,
                    collectNum: 146
                },
                {
                    author: '孙七',
                    issueTime: new Date().getFullYear()+'年'+(new Date().getMonth()+1)+'月'+new Date().getDate()+'日',
                    title: '',
                    commentNum: 88,
                    glanceNum: 200,
                    collectNum: 66
                },
                {
                    author: '周八',
                    issueTime: new Date().getFullYear()+'年'+(new Date().getMonth()+1)+'月'+new Date().getDate()+'日',
                    title: '',
                    commentNum: 999,
                    glanceNum: 1221,
                    collectNum: 888
                },
                                {
                    author: '老九',
                    issueTime: new Date().getFullYear()+'年'+(new Date().getMonth()+1)+'月'+new Date().getDate()+'日',
                    title: '',
                    commentNum: 879,
                    glanceNum: 1987,
                    collectNum: 33
                },
                {
                    author: '小十',
                    issueTime: new Date().getFullYear()+'年'+(new Date().getMonth()+1)+'月'+new Date().getDate()+'日',
                    title: '',
                    commentNum: 99,
                    glanceNum: 221,
                    collectNum: 88
                }
            ],
            farticleBriefs: [],
            carticleBriefs: [],
            fcurrentPage: 1,
            fpageSize: 4,
            ccurrentPage: 1,
            cpageSize: 4,
            isLogin: true
        }
    },
    mounted() {
       this.initFreeData();
       this.initChargeData();
    },
    methods: {
        // 点击logo标志触发事件，默认路由至首页
        showFirstIndex() {
            this.$router.push({
                path: '/'
            })
        },
        // 点击下拉悬浮菜单触发事件
        showView(index) {
            this.$router.push({
                path: index
            })
        },
        // 鼠标悬浮触发下拉菜单显示
        showSelectList(refName) {
            this.$refs[refName].style.display = 'block';
        },
        // 鼠标离开触发下拉菜单隐藏
        hideSelectList(refName) {
            this.$refs[refName].style.display = 'none';
        },
        // 点击购物车触发事件
        showOrderCat() {
            this.$router.push({
                path: '/articleOrder'
            });
        },
        // 点击文章标题触发显示文章具体内容
        watchContent(category, articleBrief, type) {
            articleBrief.title = category;
            // 免费专区显示
            if (type == 'free') {
                this.$router.push({
                    path: '/articleContent',
                    query: {
                        author: articleBrief.author,
                        issueTime: articleBrief.issueTime,
                        title: articleBrief.title,
                        commentNum: articleBrief.commentNum,
                        glanceNum: articleBrief.glanceNum,
                        collectNum: articleBrief.collectNum
                    }
                })
            }
            // 精品专区显示
            if (type == 'charge') {
                this.$router.push({
                    path: '/articleDetails'
                })
            }
        },
        // 显示免费专区内容
        initFreeData() {
            this.farticleBriefs = [];
            let start = (this.fcurrentPage-1) * this.fpageSize;
            let end = this.fcurrentPage * this.fpageSize;
            for (let i = start; i < end; i++) {
                this.farticleBriefs.push(this.sarticleBriefs[i]);
            }  
        },
        // 显示精品专区内容
        initChargeData() {
            this.carticleBriefs = [];
            let start = (this.ccurrentPage-1) * this.cpageSize;
            let end = this.ccurrentPage * this.cpageSize
            for (let i = start; i < end; i++) {
                this.carticleBriefs.push(this.sarticleBriefs[i]);
            }
        },
        handlerChargeCurrentChange(val) {
            this.ccurrentPage = val;
        },
        handlerFreeCurrentChange(val) {
            this.fcurrentPage = val;
        },
        loseIntertest() {
            this.$message.warning('当前版本暂不支持此功能');
        },
        hiddenIntertestWords(index, type) {
            if (type == 'free') {
                this.$refs['free_intertest_'+index][0].firstChild.style.display = 'none';
                this.$refs['free_intertest_'+index][0].style.background = '';
                this.$refs['free_intertest_'+index][0].style.color = '#909399';
            }
            if (type == 'charge') {
                this.$refs['charge_intertest_'+index][0].firstChild.style.display = 'none';
                this.$refs['charge_intertest_'+index][0].style.background = '';
                this.$refs['charge_intertest_'+index][0].style.color = '#909399';   
            }
        },
        showLostIntertestWords(index, type) {
            if (type == 'free') {
                this.$refs['free_intertest_'+index][0].firstChild.style.display = 'inline-block';
                this.$refs['free_intertest_'+index][0].style.background = 'rgb(11, 138, 223)';
                this.$refs['free_intertest_'+index][0].style.color = 'white';
                this.$refs['free_intertest_'+index][0].style.borderRadius = '4px';
            }
            if (type == 'charge') {
                this.$refs['charge_intertest_'+index][0].firstChild.style.display = 'inline-block';
                this.$refs['charge_intertest_'+index][0].style.background = 'rgb(11, 138, 223)';
                this.$refs['charge_intertest_'+index][0].style.color = 'white';
                this.$refs['charge_intertest_'+index][0].style.borderRadius = '4px';
            }
        }
    },
    watch: {
        fcurrentPage: function() {
            this.initFreeData();
        },
        ccurrentPage: function() {
            this.initChargeData();
        }
    }    
}
</script>
<style>
    .logo {
        cursor: pointer;
    }
    #user-avatar {
        margin-left: 16px;
    }
    .layout-icon {
        font-size: 30px;
        cursor: pointer;
    }
    #unuse-div {
        background: white;
        height: 12px;
    }
    #user-select {
        cursor: pointer;
        background: white;
        height: 42px;
        line-height: 42px;
        text-align: center;
        vertical-align: middle;
    }
    #user-select:hover {
        background: gainsboro;
    }
    #advise-select {
        cursor: pointer;
        background: white;
        height: 42px;
        line-height: 42px;
        text-align: left;
    }
    #advise-select:hover {
        background: gainsboro;
    }
    #advise-select > span {
        margin-left: 20%;
    }
    #user-select-list .el-divider {
        margin: 12px auto;
    }
    #user-select-list {
        text-align: center;
        border: 1px solid rgba(0, 0, 0, 0.089);
        border-top: none;
        width: 150px;
        position: absolute;
        right: 54px;
        background: white;
        z-index: 100;
        display: none;
    }
    #advise-select-list {
        border: 1px solid rgba(0, 0, 0, 0.089);
        border-top: none;
        width: 126px;
        position: absolute;
        right: 54px;
        background: white;
        z-index: 100;
        display: none;
    }
    .right-content {
        height: 42px;
    }
    .right-content > span {
        vertical-align: middle;
        display: -moz-inline-box; 
        display: inline-block;
        text-align: center; 
        width: 42px;
    }
    .right-content .el-avatar {
        cursor: pointer;
    }
    .right-content .login-regist {
        display: -moz-inline-box; 
        display: inline-block;
        text-align: center; 
        width: 100px;
    }
    .index-advice, .index-shop, .login-regist {
        display: -moz-inline-box; 
        display: inline-block;
        height: 42px;
        line-height: 42px;
    }
    .index-advice i, .index-shop i {
        cursor: pointer;
        font-size: 24px;
    }
    #el-icon-search {
        color: white;
    }
    .icon-search i {
        color: rgb(14, 44, 99);
    }
    .content-search .el-input-group__append {
        border-color: rgb(14, 44, 99);
    }
    .content-search .el-input-group__append {
        background-color: rgb(14, 44, 99);
        color: white;
    }
    a {
        text-decoration: none;
        color: black;
    }
    .footer-item-content1 {
        margin-top: 1%; 
        font-size: 14px;
    }
    .footer-item-content2 {
        font-size: 14px; 
        color: gray; 
        text-align: center;
    }
    #free-lose-intertest-words, #charge-lose-intertest-words {
        display: none;
    }
    #article-free-area .el-image, #article-charge-area .el-image {
        cursor: pointer;
        width: 100%;
        height: 100%;
    }
    #article-free-area-footer .el-pagination, #article-charge-area-footer .el-pagination {
        float: right;
    }
    #article-free-area > .el-col > .el-row:nth-last-of-type(2) > span:last-of-type, #article-charge-area  > .el-col > .el-row:nth-last-of-type(2) > span:last-of-type {
         float: right;
    }
    #article-free-area > .el-col > .el-row:not(:nth-of-type(2)), #article-charge-area > .el-col > .el-row:not(:nth-of-type(2)) {
        color: #909399;
        font-size: 14px;
    }
    #article-free-area > .el-col > .el-row:nth-of-type(2) span, #article-charge-area  > .el-col > .el-row:nth-of-type(2) span {
        cursor: pointer;
        font-size: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
    } 
    .index-advice, .index-shop, .login-regist {
        display: -moz-inline-box; 
        display: inline-block;
        height: 42px;
        line-height: 42px;
    }
    .index-advice i, .index-shop i {
        cursor: pointer;
        font-size: 24px;
    }
    .content-search .el-input-group__append {
        border-color: rgb(14, 44, 99);
    }
    .content-search .el-input-group__append {
        background-color: rgb(14, 44, 99);
        color: white;
    }
    a {
        text-decoration: none;
        color: black;
    }
    #article-free-area,  #article-charge-area {
        margin: 2% auto;
    }
    #article-free-area > .el-col > .el-row:last-of-type > span:last-of-type, #article-charge-area > .el-col > .el-row:last-of-type > span:last-of-type {
        float: right;
        cursor: pointer;
    }
    #article-free-area > .el-col > .el-row, #article-charge-area > .el-col > .el-row {
        margin: 1% 3%;
    }
    #article-area > .el-row, #article-charge-area > .el-row {
        margin: 64px auto;
    }
    #article-free-area-title, #article-charge-area-title {
        text-align: center;
        font-size: 18px;
        color: rgb(14, 44, 99);
    }
    #article-list > .el-row {
        margin: auto auto;
        width: 94%;
    } 
    #article-list > .el-row:nth-child(2) {
        height: 48px;
        -webkit-box-shadow:0px 3px 3px #c8c8c8 ;
        -moz-box-shadow:0px 3px 3px #c8c8c8 ;
        box-shadow:0px 3px 3px #c8c8c8 ;
    }
    #article-list .el-breadcrumb {
        margin-left: 2%;
        font-size: 16px;
        line-height: 48px;
    }
</style>